<?php $this->regCss('reset') ?>
<?php $this->regCss('layer') ?>
<?php $this->regCss('position') ?>
<?php $this->regJs('common1') ?>
<?php $this->regJs('site') ?>
<?php $this->regJs('jquery.form') ?>

<style type="text/css">
    .bg {
        background: #000!important;
    }
</style>

<div class="wrap">
        <div class="container">
            <div class="row row1">
                <div class="col-xs-3 text-center no-padding">产品</div>
                <div class="col-xs-2 text-center no-padding average">建仓价</div>
                <div class="col-xs-3 text-center no-padding average">现价</div>
                <div class="col-xs-2 text-center no-padding">盈亏</div>
                <div class="col-xs-2 text-center no-padding border-no">倒计时</div>
            </div>
         <?php foreach ($data as $order): ?>
         <div class="row row2 times" data-time="<?= strtotime($order->sell_time) - strtotime(date('Y-m-d H:i:s', time())) ?>" data-id="19131">        
                <div class="col-xs-3 text-center no-padding"><?= $order->product->name ?></div>
                <div class="col-xs-2 text-center no-padding average color-orange">
                    <span class="col-xs-12 no-padding"><?= floatval($order->price) ?></span>
                    <!-- <span class="col-xs-4 no-padding more"> -->
                    <!-- </span> -->
                </div>
                <div class="col-xs-3 no-padding text-center average" data-product="20"><?= floatval($order->product->dataAll->price) ?></div>
                <div class="col-xs-2 text-center no-padding"><font class="profit" style="color: rgb(50, 205, 50);">0.00</font></div>
                <div class="col-xs-2 text-center no-padding">
                    <!-- <font class="restTime"></font> -->
                    <div class="countdown">
                        <div class="game_time">
                            <div class="hold">
                                <div class="pie pie1" style=""></div>
                            </div>
                            <div class="hold">
                                <div class="pie pie2"></div>
                            </div>
                            <div class="bg"></div>
                            <div class="time">111</div>
                        </div>   
                    </div>
                </div>      
            </div>
        <?php endforeach ?> 


        </div>
        <div class="set-mask">
            
        </div>
        <!-- 个人持仓设置 -->
        <!-- <div class="set-block no-padding">
            <div class="row no-padding set-row1">
                <div class="col-xs-6 text-right no-padding ">
                    设置
                </div>
                <div class="col-xs-6 text-right no-padding">
                    <img class="close-icon" id="closeSetbtn" src="./持仓_files/close_icon.png">
                </div>
            </div>
            <div class="row  set-row2">
                <div class="col-xs-4  text-center">止盈/损点</div>
                <div class="col-xs-2  text-center no-padding"><span class="setBtn no-padding setBtnactive">0</span></div>
                <div class="col-xs-2  text-center no-padding"><span class="setBtn no-padding">0</span></div>
                <div class="col-xs-2  text-center no-padding"><span class="setBtn ">0</span></div>
            </div>
            <div class="set-row3">
                <span class="col-xs-12 text-center" id="setsaveBtn">保存</span>
            </div>
        </div>
        <div style="text-align: center" class="page-block mb-60"></div>
    </div>
 -->


    <script>
$(function () {
    // // 个人持仓设置
    // $(".set").click(function(){
    //     $(".set-mask").show();
    //     $(".set-block").fadeIn("slow");
    //     $("body").addClass('body_style');
    //     //添加
    //     $('.setStopPoint').removeClass('newPoint');
    //     $(this).addClass('newPoint');
    //     var point = $(this).data('point').split(",");
    //     var stop_point = Math.floor($(this).data('stop-loss-point'));
    //     $(".row.set-row2 .col-xs-2").remove();
    //     for (var i=0; i<point.length; i++) {
    //         if (point[i] == stop_point) {
    //             $(".row.set-row2").append('<div class="col-xs-2  text-center no-padding"><span class="setBtn no-padding setBtnactive">'+point[i]+'</span></div>');
    //         } else {
    //             $(".row.set-row2").append('<div class="col-xs-2  text-center no-padding"><span class="setBtn no-padding">'+point[i]+'</span></div>');    
    //         }            
    //     }
    // });

    // $(".set-row2").on("click","span",function() {
    //     var $btn = $(this);
    //     $btn.addClass('setBtnactive');
    //     $btn.parent().siblings().children().removeClass('setBtnactive');
    // });

    // $("#closeSetbtn").click(function(){
    //     $(".set-mask").hide();
    //     $(".set-block").fadeOut("slow");
    // });

    // //提交止盈止损参数
    // $('#setsaveBtn').click(function() {
    //     var data = {};
    //     data.profit = $(".row.set-row2 .setBtnactive").html();
    //     data.loss = data.profit;
    //     data.id = $(".newPoint").data('id');
    //     $.post("/order/ajax-save-order-point", {data: data}, function(msg) {
    //         if (msg.state == 1) {
    //             $.alert(msg.info);
    //             $(".newPoint").data('stop-loss-point',data.loss);
    //             $(".set-mask").hide();
    //             $(".set-block").fadeOut("slow");
    //         } else {
    //             $.alert(msg.info);
    //         }
    //     }, 'json');
    // });

    //持仓数据跳动
    var updateOrder = function () {
        $.post("/order/ajax-update-order", function(msg) {
            if (msg.state) { 
                var obj = msg.info,
                    data = msg.data;
                // 修改所有订单现价
                $("[data-product]").each(function () {
                    var $this = $(this);
                    $this.html(data[$this.data('product')]);
                });
                // 对页面所有数据进行修改
                $('.row.row2').each(function () {
                    //被系统平仓的订单消失
                    var order_id = Number($(this).data('id'));
                    //判断此持仓id是否被系统平仓
                    if (obj[order_id] == undefined) {
                        $(this).remove();
                    }                   
                    var $this = $(this).find('.profit');
                    $this.html(obj[order_id]);
                    if (obj[order_id] > 0) {
                       $this.css({'color':'red'});; 
                       // $this.removeClass('co_g'); 
                    } else {
                       $this.css({'color':'#32CD32'});
                       // $this.addClass('co_g'); 
                    }
                });
            }
            setTimeout(function () {
                updateOrder();
            }, 1000);
        }, 'json');
    }
    updateOrder();
    //倒计时
    // $(".times").each(function () {
    //     var $this = $(this),
    //         second = parseInt($this.data('time'));
    //     if (second > 0) {
    //         var timeCount = function (second) {
    //             if (second <= -1) {
    //                 $this.remove();
    //             } else {
    //                 $this.find('font.restTime').html(second + ' 秒');
    //                 second--;
    //                 setTimeout(function () {
    //                     timeCount(second);
    //                 }, 1000);
    //             }
    //         };
    //         timeCount(second);
    //     } else {
    //         $this.remove();
    //     }
    // });
    var countTime = function($parent) {
        var i = 0,
            j = 0,
            count = 0,
            MM = 0,
            SS = parseInt($parent.data('time')),
            MS = 0,
            totle = (MM + 1) * 600,
            d = 180 * (MM + 1),
            MM = "0" + MM,
            gameTime = parseInt($parent.data('time')),
            s,
            t1,
            t2;
        //count down
        var showTime = function() {
            totle = totle - 1;
            if(totle == 0) {
                clearInterval(s);
                clearInterval(t1);
                clearInterval(t2);
                $parent.find(".pie2").css("-o-transform", "rotate(" + d + "deg)");
                $parent.find(".pie2").css("-moz-transform", "rotate(" + d + "deg)");
                $parent.find(".pie2").css("-webkit-transform", "rotate(" + d + "deg)");
            } else {
                if(totle > 0 && MS > 0) {
                    MS = MS - 1;
                    if(MS < 10) {
                        MS = "0" + MS
                    };
                };
                if(MS == 0 && SS > 0) {
                    MS = 10;
                    SS = SS - 1;
                    if(SS < 10) {
                        SS = "0" + SS
                    };
                };
                if(SS == 0 && MM > 0) {
                    SS = 60;
                    MM = MM - 1;
                    if(MM < 10) {
                        MM = "0" + MM
                    };
                };
            };
            // if (SS < 0) {
            //     $parent.remove();
            // }
            $parent.find(".time").html(SS);
            if (SS <= 0) {
                $parent.find(".time").html(0);
                $parent.remove();
            }
        };

        var start1 = function() {
            //i = i + 0.6;
            i = i + 360 / ((gameTime) * 10); //旋转的角度  90s 为 0.4  60s为0.6
            count = count + 1;
            if(count <= (gameTime / 2 * 10)) { // 一半的角度  90s 为 450
                $parent.find(".pie1").css("-o-transform", "rotate(" + i + "deg)");
                $parent.find(".pie1").css("-moz-transform", "rotate(" + i + "deg)");
                $parent.find(".pie1").css("-webkit-transform", "rotate(" + i + "deg)");
            } else {
                $parent.find(".pie2").css("backgroundColor", "#3db5e6");
                $parent.find(".pie2").css("-o-transform", "rotate(" + i + "deg)");
                $parent.find(".pie2").css("-moz-transform", "rotate(" + i + "deg)");
                $parent.find(".pie2").css("-webkit-transform", "rotate(" + i + "deg)");
            }
        };

        var start2 = function() {
            j = j + 0.6;
            count = count + 1;
            if(count == 300) {
                count = 0;
                clearInterval(t2);
                t1 = setInterval("start1()", 100);
            }
            $parent.find(".pie2").css("-o-transform", "rotate(" + j + "deg)");
            $parent.find(".pie2").css("-moz-transform", "rotate(" + j + "deg)");
            $parent.find(".pie2").css("-webkit-transform", "rotate(" + j + "deg)");
        }

        var countDown = function() {
            //80*80px 时间进度条q
            var i = 0,
                j = 0,
                count = 0,
                MM = 0,
                SS = gameTime,
                MS = 0,
                totle = (MM + 1) * gameTime * 10,
                d = 180 * (MM + 1),
                MM = "0" + MM;

            showTime();

            s = setInterval(function(){
                showTime();
            }, 100);
            start1();
            //start2();
            t1 = setInterval(function(){
                start1();
            }, 100);
        }
        countDown();
    }
    $(".times").each(function () {
        countTime($(this));
    });
});
</script>